<template>
    <basic-container>
        <div class="app-container" style="background-color: #d3d5d9;">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                <el-form-item label="日期查询">
                    <el-date-picker v-model="queryParams.start" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="设备名称">

                    <el-select style="width: 180px;" v-model="queryParams.facility_id" placeholder="请选择">
                            <el-option v-for="item in roleOptions" :key="item.facility_id" :label="item.name"
                                :value="item.facility_id">
                            </el-option>
                        </el-select>
            
                </el-form-item>
                <el-form-item>
                
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button type="primary" plain icon="el-icon-download" size="mini"
                    @click="handleExport">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-left: -50px; width: 90vw; height: 70vh;">
            <div id="chart" style="width: 100%; height: 100%;"></div>
        </div>
      
    </basic-container>
</template>

<script>
import * as echarts from 'echarts';
import { getreportTask } from "@/api/byhour";
import {
    getkindList,
} from "@/api/data";
export default {
    data() {
        // 获取当天日期，格式化为 yyyy-MM-dd
        const today = new Date();
        const year = today.getFullYear();
        const month = (today.getMonth() + 1).toString().padStart(2, '0');
        const day = today.getDate().toString().padStart(2, '0');
        const defaultDate = `${year}-${month}-${day}`;

        const posList = [
            'left',
            'right',
            'top',
            'bottom',
            'inside',
            'insideTop',
            'insideLeft',
            'insideRight',
            'insideBottom',
            'insideTopLeft',
            'insideTopRight',
            'insideBottomLeft',
            'insideBottomRight'
        ];

        const appConfigParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        const labelOption = {
            show: true,
            position: 'insideBottom',
            distance: 15,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{name|{a}}  {c}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['NG数量', '合格数量', '生产总数'],
                show: true,
                top: 10,
                left: 'center',
                textStyle: {
                    fontSize: 12
                }
            },
           
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    axisLabel: {
                        interval: 0,  // 强制显示所有标签
                        rotate: 45,   // 旋转标签以防止重叠
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'NG数量',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '合格数量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '生产总数',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },

            ]
        };

        return {
            roleOptions: [],
            queryParams: {
                start: defaultDate,  // 设置默认日期
                facility_id: 1,
            },
            schedule: [{
                value: 1,
                label: '白班'
            }, {
                value: 2,
                label: '晚班'
            }],
            value: [],
            posList,
            app: {
                configParameters: appConfigParameters,
                config: {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: this.updateChart
                }
            },
            labelOption,
            option,
            menuList: [],
            loading: false
        };
    },
    methods: {
        getSUM() {
            let dom = document.getElementById("chart");
            this.$refs.chart = echarts.init(dom);
            this.$refs.chart.setOption(this.option);
            console.log('Chart option:', this.option);
        },
        getdkindList() {
            getkindList().then((res) => {
                this.roleOptions = res.data.data;
                console.log(this.roleOptions, '99999');
            });
        },
        handleQuery() {
         
            this.getList();
        },
        handleExport() {
            this.$confirm('是否将数据导出为EXcel文档？').then(() => {
                const params = new URLSearchParams();
                params.append('start', this.queryParams.start);
                params.append('facility_id', this.queryParams.facility_id);
             
                const url = new URL('http://10.1.115.252:10001/api/station/output/number/excel');
            
                url.search = params.toString();
                window.location.href = url.toString();
            })
        },
        getList() {
            this.loading = true;
            getreportTask(this.queryParams).then(response => {
                console.log('返回的数据条数:', response.data.data.length);  // 添加这行来查看实际返回的数据条数
                console.log('完整的返回数据:', response.data.data);  // 查看完整数据
                
                this.menuList = response.data.data;
                
                // 打印处理后的x轴数据
                const xAxisData = this.menuList.map(item => {
                    const startHour = item.start.split(' ')[1].split(':')[0];
                    const endHour = item.stop.split(' ')[1].split(':')[0];
                    return `${startHour}:00-${endHour}:00`;
                });
                console.log('处理后的x轴数据:', xAxisData);  // 添加这行来查看处理后的x轴数据
                
                this.option.series[0].data = this.menuList.map(item => item.ng);
                this.option.series[1].data = this.menuList.map(item => item.standard);
                this.option.series[2].data = this.menuList.map(item => item.total);
                this.option.xAxis[0].data = xAxisData;
                
                this.total = response.data.total;
                this.getSUM()
            }).finally(() => {
                this.loading = false;
            })
        },
        updateChart() {
            const labelOption = {
                rotate: this.app.config.rotate,
                align: this.app.config.align,
                verticalAlign: this.app.config.verticalAlign,
                position: this.app.config.position,
                distance: this.app.config.distance
            };
            this.$refs.chart.setOption({
                series: [
                    { label: labelOption },
                    { label: labelOption },

                ]
            });
        }
    },
    created() {
        this.getdkindList();
   
        this.getList()
    },

};
</script>
<style>

</style>